<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        body{
            padding:0;
            margin:auto;
        }
        .top,.bottom{
            width:100%;
            height:100px;
            position:fixed;
            
        }
        .top{
            top:0;
            background-color: #080000;
            background-repeat: no-repeat;
            
        }
        .bottom{
            bottom:0;
            background-color: #F8F8F8;
            border:1px solid black;
        }
        .sp{
            font-family: "微软雅黑";
            font-size: 35px;
            font-weight:  bolder;
            line-height: 100px;
            color:#FFFFFF;
        }
        .top>img{
            float:right;
            margin-top: 18px;
            padding-right: 10px;
        }
        .body{
            width:100%;
            position:absolute;
            top:100px;
            bottom:100px;
        }
        .x1,.x2,.x3,.x4{
            float:left;
            margin-left: 200px;
            font-family: "微软雅黑";
            font-size: 18px;
        }
        p{
            line-height: 0em;
        }
        
        </style>
    </head>
    <body>
    <div class="top">
        <span class="sp">微信(10)</span>
        <img src="imgs/增加.png" height="64" width="64"  />
    </div>
    <div class="body"></div>
   
    <div class="bottom">
        <div class="x1">
        <img src="imgs/对话框.png" style="margin-top: 10px;"/>
        <p>微信</p>
        </div>
        <div class="x2">
        <img src="imgs/通讯录1.png" style="margin-top: 10px;" />
        <p>通讯录</p>
        </div>
        <div class="x3">
        <img src="imgs/发现-亮.png" style="margin-top: 10px;" />
        <p>发现</p>
        </div>
        <div class="x4">
        <img src="imgs/我1.png" style="margin-top: 10px;" />
        <p>我</p>
        </div>
    </div>
    </body>
</html>